<template>
  <div class="asset-return">
    <group class="form-group">
      <cell title="申请人" :value="info.name"></cell>
      <!-- <wx-select-dept
        title="申请人部门"
        :selectDepartmentNames="info.dept"
        @getDepartmentList="getDepartmentList"
      ></wx-select-dept> -->
      <cell title="申请人部门" :value="info.dept"></cell>
      <x-textarea
        class="mark"
        :max="100"
        v-model="info.explain"
        placeholder="请输入归还说明，100字以内"
      >
        <div slot="label">归还说明</div>
      </x-textarea>
    </group>
    <div class="count-list">
      <div>归还明细：共计{{ list.length }}条</div>
      <div class="count-list-collapse" @click="collapse = !collapse">
        <span>{{ collapse ? "收起" : "展开" }} </span>
        <x-icon class="more" v-show="collapse" type="ios-arrow-up"></x-icon>
        <x-icon class="more" v-show="!collapse" type="ios-arrow-down"></x-icon>
      </div>
    </div>
    <asset-list :list="list" v-show="!collapse"></asset-list>
    <div class="submit-box">
      <x-button class="submit-btn" @click.native="submit">提交</x-button>
    </div>
  </div>
</template>

<script>
import WxSelectDept from "@/components/common/wx-select-dept";
import AssetList from "../components/asset-list";
import { Group, XInput, Cell, Datetime, XTextarea, XButton } from "vux";
import AssetApi from "@/api/asset.js";
export default {
  components: {
    WxSelectDept,
    AssetList,
    Group,
    XInput,
    Cell,
    Datetime,
    XTextarea,
    XButton,
  },
  data() {
    return {
      info: {
        name: this.$store.state.user.userInfo.name,
        dept: this.$store.state.user.userInfo.depName,
        explain: "",
      },
      collapse: false,
      total: 0,
      list: [],
    };
  },
  mounted() {
    console.log(64,this.$route)
    let selectIdList = this.$route.params.list.split(",");
    this.getList(selectIdList);
  },
  methods: {
    getList(selectIdList) {
      let _params = {
        page: 1,
        pageSize: 1000,
        assetCode: this.$route.params.name,
        classId: this.$route.params.classId,
        place: this.$route.params.place,
        borrowUserId: this.$store.state.user.userInfo.wxUserId, //this.$store.state.user.userInfo.userId
      };
      AssetApi.findMyBorrowAll(_params).then((res) => {
        if (res.code == "0000") {
          let _list = res.data.records;
          this.list = _list.filter((item) => selectIdList.includes(item.orderId));
        }
      });
    },
    getDepartmentList(value){
      let deptIds = value[0].id;
      let deptNames = value[0].name;
      this.form.dept = deptIds;
    },
    submit() {
      let _params = {
        explain: this.info.explain,
        orderIds: this.$route.params.list,
      };
      AssetApi.giveBack(_params).then((res) => {
        if (res.code == "0000") {
          this.$vux.toast.show({
            text: "资产已提交归还",
          });
          this.$router.push("assetHome");
        }
      });
    },
  },
};
</script>

<style lang="less">
.mark {
  flex-wrap: wrap;
  padding: 15px 15px 10px 20px !important;
  .weui-cell__hd {
    width: 100%;
    height: 20px;
    line-height: 20px;
    // margin-top: 10px;
    color: #101010;
  }
}
.count-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 36px;
  line-height: 36px;
  background: #f1f1f1;
  padding: 0 20px;
  font-size: 14px;
  .count-list-collapse {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }
}
.asset-return {
  padding-bottom: 60px;

  .submit-box {
    position: fixed;
    bottom: 0;
    width: 100%;
    padding: 10px 0;
    background: #fff;
    z-index: 100;
    .submit-btn {
      width: 260px;
      border-radius: 20px;
      color: #fff;
      margin: 0 auto;
      border-color: rgb(205, 166, 105);
      background: rgb(205, 166, 105);
    }
  }
}
</style>
